The :focus-within pseudo-class in CSS allows you to style a parent element when any of its child elements receive focus. It’s useful for creating interactive effects on containers that include input fields, links, or buttons.

Key Points About :focus-within

1
:focus-within applies styles to an element if it or any of its descendants are focused.
2
It works for nested elements like inputs, buttons, or links inside a container.
3
Commonly used for styling form groups, card containers, or navigation menus when focused.

Example: Styling a Parent When a Child Is Focused

In this example, when the user focuses on the input field inside .form-group, the parent container’s border turns blue and its background changes to a light shade, thanks to the :focus-within pseudo-class.

Best Practices

1
Use :focus-within to create visual cues for grouped elements or form sections.
2
Combine it with transitions for smooth highlighting effects.
3
Avoid overusing focus styles that distract the user from the input itself.
4
Ensure accessibility by maintaining visible focus outlines on individual elements.

Difficulty: 6/10

Topics: CSS :focus-within, parent-child styling, accessibility implications

Scenario Questions

0-2 years experience

1
How would you style a form container to highlight it with a border when any input inside it receives focus?
2
What happens if you try to use :focus on the parent div instead of its child input? Why doesn't that work?

2-5 years experience

1
A dropdown menu’s parent container isn’t highlighting when a child button is focused — what would you check first, and why?
2
We’re using :focus-within to style a card on focus, but it breaks in Safari — how would you debug and fix this?

5-8 years experience

1
You’re building a reusable form component that needs to visually indicate focus state for accessibility — when would you choose :focus-within over a JavaScript-based solution, and what tradeoffs do you consider?
2
In a large component library, multiple teams are using :focus-within inconsistently — how would you enforce a standard pattern without over-engineering?

8+ years experience

1
We’re migrating from a legacy JS-based focus highlight system to CSS :focus-within — what cross-team coordination, testing, and fallback strategies would you design to avoid accessibility regressions?
2
How would you architect a design system’s focus styling layer to handle :focus-within across shadow DOM components, iframes, and third-party widgets without performance or security risks?

Follow-up Questions

❓What happens if the child element is hidden or disabled?
❓How would you test this in a screen reader environment?
❓Could this cause layout shifts? How would you mitigate that?